<template>
  <div class="cate">
    <div class="cate-header">
      <p>全部分类</p>
    </div>
    <!-- <div class="cate-bar">
      <div class="cate-item">
        <div class="cate-item-box">
          <div class="cate-item-title">分类</div>
          <span class="iconfont icon-below-s"></span>
        </div>
        <div class="cate-item-chlidren"></div>
      </div>
      <div class="cate-item">
        <div class="cate-item-box">
          <div class="cate-item-title">排序</div>
          <span class="iconfont icon-below-s"></span>
        </div>
        <div class="cate-item-chlidren"></div>
      </div>
      <div class="cate-item">
        <div class="cate-item-box" style="border: none">
          <div class="cate-item-title">删选</div>
          <span class="iconfont icon-below-s"></span>
        </div>
        <div class="cate-item-chlidren"></div>
      </div>
    </div> -->
    <van-dropdown-menu class="my-dropdown">
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        @change="cateChange($event)"
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        @change="getShops($event)"
      />
      <van-dropdown-item
        v-model="value3"
        :options="option3"
        @change="getShops($event)"
      />
    </van-dropdown-menu>
    <home-content
      class="content"
      :shopData="shopData"
      :showTitle="false"
    ></home-content>
    <!-- 占位 -->
    <div style="width: 100%; height: 50px"></div>
    <bottom-bar ref="bottomBar" class="myBar"></bottom-bar>
  </div>
</template>

<script>
import { getCateShop, getAllshop } from "../api/api";
import bottomBar from "../components/common/bottomBar";
import homeContent from "../components/home/homeCotent";
export default {
  components: {
    bottomBar,
    homeContent,
  },
  data() {
    return {
      restaurant_category_id: 0,
      order_by: 4,
      shopData: [],
      cateList: [],
      value1: undefined,
      value2: "a",
      value3: 4,
      option1: [],
      option2: [{ text: "请选择", value: "a" }],
      option3: [
        { text: "智能排序", value: 4 },
        { text: "起送价", value: 1 },
        { text: "评分", value: 3 },
        { text: "距离最近", value: 5 },
        { text: "销量最高", value: 6 },
      ],
    };
  },
  methods: {
    cateChange($event) {
      this.option2 = [];
      this.option2.push({ text: "请选择", value: "a" });
      this.value2 = "a";
      for (let i = 0; i < this.cateList.length; i++) {
        if (this.cateList[i].id == $event) {
          //获取二级数组
          this.cateList[i].sub_categories;
          for (
            let index = 0;
            index < this.cateList[i].sub_categories.length;
            index++
          ) {
            let obj = {};
            obj.text = this.cateList[i].sub_categories[index].name;
            obj.value = this.cateList[i].sub_categories[index].id;
            this.option2.push(obj);
          }
        }
      }
    },
    getShops($event) {
      let geohash = JSON.parse(localStorage.getItem("state")).geoHash;
      let hasharr = geohash.split(",");
      if ($event < 10) {
        this.order_by = $event;
      } else {
        this.restaurant_category_id = $event;
      }
      getAllshop({
        latitude: hasharr[0],
        longitude: hasharr[1],
        restaurant_category_ids: [this.restaurant_category_id],
        order_by: this.order_by,
      }).then((res) => {
        this.shopData = res;
      });
    },
  },
  created() {
    if (localStorage.getItem("state")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(localStorage.getItem("state"))
        )
      );
    }
    let geohash = JSON.parse(localStorage.getItem("state")).geoHash;
    let hasharr = geohash.split(",");
    getAllshop({
      latitude: hasharr[0],
      longitude: hasharr[1],
    }).then((res) => {
      this.shopData = res;
    });
    getCateShop({}).then((res) => {
      for (let i = 0; i < res.length; i++) {
        let obj = {};
        obj.text = res[i].name;
        obj.value = res[i].id;
        this.option1.push(obj);
      }
      this.cateList = res;
    });
  },
};
</script>

<style lang="scss" scoped>
.cate {
  .my-dropdown {
    position: sticky;
    top: 1.226667rem;
    z-index: 99;
  }
  .cate-header {
    position: sticky;
    width: 100%;
    background-color: #50b8fd;
    height: 1.226667rem;
    top: 0;
    z-index: 99;
    &::before {
      content: "";
      display: block;
      width: 0.266667rem;
      height: 0.453333rem;
      background: url("../static/img/backw.png") no-repeat center;
      background-size: contain;
      position: absolute;
      top: 0.373333rem;
      left: 0.373333rem;
    }
    p {
      height: 100%;
      line-height: 1.226667rem;
      font-size: 0.48rem;
      color: #fff;
      text-align: center;
    }
  }
  .cate-bar {
    width: 100%;
    height: 1.066667rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: Microsoft Yahei;
    .cate-item {
      flex: 1;
      height: 1.066667rem;
      text-align: center;
      box-sizing: border-box;
      padding: 0.133333rem;
      .cate-item-box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-right: 1px solid #ccc;
        &:last-child {
          border: none;
        }
        .cate-item-title {
          font-size: 0.453333rem;
        }
        span {
          display: inline-block;
          padding-top: 0.133333rem;
          font-size: 0.32rem;
          padding-left: 0.133333rem;
          color: #999;
        }
      }
    }
  }
}
</style>